<template>
	<view>
		<view class="bj1">
			<span class="sj">{{discuss.title}}</span>
			<view style="width: 70px;height: 30px;background-color: #FFFFFF;border-radius: 12px;margin-left: 280px;position: relative;top: 20px;">
				<span v-if="guanzhuid==0" @click="guanzhu()" style="color: #3ED2E2;font-size: 14.5px;margin-left: 20px;position: relative;top: 4px;">关注</span>
				<span v-if="guanzhuid==1" @click="qxguanzhu()" style="color: #3ED2E2;font-size: 14.5px;margin-left: 15px;position: relative;top: 4px;">已关注</span>
			</view>
			
			<view style="width: 100%;height: 50px;margin-top: 50px;">
				<span style="font-size: 13px;color: #FFFFFF;margin-left: 25px;">{{discuss.follow}}人关注</span>
				<span style="font-size: 13px;color: #FFFFFF;margin-left: 25px;">{{discuss.comment}}条评论</span>
			</view>
			<view v-if="jingcai !=''" style="width: 100%;height: 500px;background-color: #FFFFFF;margin-top: 10px;">
				<view class="jcpl">
					<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 25px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
					<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>精彩评论</b></span>
					<view class="pl">
						<view style="width: 40px;height: 40px;background-color: #000000;border-radius: 50%;position: relative;top: 10px;left: 20px;display: inline-block">
							<image :src="jingcai.user.photoimg" style="width: 100%;height: 100%;border-radius: 50%;"></image>
						</view>
						<view style="width: 150px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: 30px;position: relative;top:-14px">
							<span style="color: #999999;font-size: 12px;">{{jingcai.user.userName}}</span>
						</view>
						<view style="width: 200px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: -150px;position: relative;top: 5px;">
							<span style="color: #999999;font-size: 12px;">{{jingcai.creationTime}}</span>
						</view>
						
						<view style="width: 15px;height: 15px;background-color: #FFFFFF;display: inline-block;position: relative;top: 5px;left: 45px;">
							<image @click="dianzan(jingcai.commentId)" src="../../static/indeimg/xiaoshou.png" style="width: 15px;height: 15px;"></image>
							<!-- <image src="../../static/indeimg/xiaoshou1.png" style="width: 15px;height: 15px;"></image> -->
						</view>
						<span style="margin-left: 55px;color: #999999;">{{jingcai.praise}}</span>
						<!-- <uni-popup ref="popup1" :mask-click="false">
							<view style="width: 100%;height: 400px;background-color: #FFFFFF;">
								<button @click="close1">取消</button>
								<view style="width: 100%;height: 40px;background-color: #000000;">
									<uni-easyinput type="text" style="width: 300px;" v-model="pl" placeholder="评论" />
									<u-button @click="setpl(jingcai.commentId)" type="primary" style="width: 50px;height: 30px;position: absolute;top:4px;left: 320px;" shape="circle" color="#fff">
										<span style="color: #2BCDDD;font-size: 12px;">搜索</span>
									</u-button>
								</view>
							</view>
						</uni-popup> -->
						<view style="width: 340px;height: 50px;margin-top: 10px;margin-left: 25px;">
							<span @click="open2(jingcai.commentId)" style="color: #333333;font-size: 14px;">{{jingcai.contents}}</span>
						</view>
						
						<uni-collapse-item :open="false" >
							<view class="pl" v-for="item in jingcai.comments">
								<view style="width: 40px;height: 40px;background-color: #000000;border-radius: 50%;position: relative;top: 10px;left: 40px;display: inline-block">
									<image :src="item.user.photoimg" style="width: 100%;height: 100%;border-radius: 50%;"></image>
								</view>
								<view style="width: 150px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: 50px;position: relative;top:-14px">
									<span style="color: #999999;font-size: 12px;">{{item.user.userName}}</span>
								</view>
								<view style="width: 200px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: -150px;position: relative;top: 5px;">
									<span style="color: #999999;font-size: 12px;">{{item.creationTime}}</span>
								</view>
								<view style="width: 15px;height: 15px;background-color: #FFFFFF;display: inline-block;position: relative;top: 5px;left: 45px;">
									<image src="../../static/indeimg/xiaoshou.png" style="width: 15px;height: 15px;"></image>
									<!-- <image src="../../static/indeimg/xiaoshou1.png" style="width: 15px;height: 15px;"></image> -->
								</view>
								<span style="margin-left: 55px;color: #999999;">{{item.praise}}</span>
								<view style="width: 340px;height: 50px;margin-top: 10px;margin-left: 45px;">
									<span @click="open2(item.fatherId)" style="color: #333333;font-size: 14px;">{{item.contents}}</span>
								</view>
								
								
							</view>
						</uni-collapse-item>
						
						
						
						
					</view>
				<view class="jcpl" v-if="jingcai !=''">
					<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 25px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
					<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>全部评论</b></span>
					<view class="pl" v-for="item in discuss.comments">
						<view style="width: 40px;height: 40px;background-color: #000000;border-radius: 50%;position: relative;top: 10px;left: 20px;display: inline-block">
							<image :src="item.user.photoimg" style="width: 100%;height: 100%;border-radius: 50%;"></image>
						</view>
						<view style="width: 150px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: 30px;position: relative;top:-14px">
							<span style="color: #999999;font-size: 12px;">{{item.user.userName}}</span>
						</view>
						<view style="width: 200px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: -150px;position: relative;top: 5px;">
							<span style="color: #999999;font-size: 12px;">{{item.creationTime}}</span>
						</view>
						<view style="width: 15px;height: 15px;background-color: #FFFFFF;display: inline-block;position: relative;top: 5px;left: 45px;">
							<image src="../../static/indeimg/xiaoshou.png" style="width: 15px;height: 15px;"></image>
							<!-- <image src="../../static/indeimg/xiaoshou1.png" style="width: 15px;height: 15px;"></image> -->
						</view>
						<span style="margin-left: 55px;color: #999999;">{{item.praise}}</span>
						<view style="width: 340px;height: 50px;margin-top: 10px;margin-left: 25px;">
							<span @click="open2(item.commentId)" style="color: #333333;font-size: 14px;">{{item.contents}}</span>
							
						</view>
						
						<uni-collapse-item :open="false" >
							<view class="pl" v-for="item1 in item.comments">
								<view style="width: 40px;height: 40px;background-color: #000000;border-radius: 50%;position: relative;top: 10px;left: 40px;display: inline-block">
									<image :src="item1.user.photoimg" style="width: 100%;height: 100%;border-radius: 50%;"></image>
								</view>
								<view style="width: 150px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: 50px;position: relative;top:-14px">
									<span style="color: #999999;font-size: 12px;">{{item1.user.userName}}</span>
								</view>
								<view style="width: 200px;height: 20px;background-color: #FFFFFF;display: inline-block;margin-left: -150px;position: relative;top: 5px;">
									<span style="color: #999999;font-size: 12px;">{{item1.creationTime}}</span>
								</view>
								<view style="width: 15px;height: 15px;background-color: #FFFFFF;display: inline-block;position: relative;top: 5px;left: 45px;">
									<image src="../../static/indeimg/xiaoshou.png" style="width: 15px;height: 15px;"></image>
									<!-- <image src="../../static/indeimg/xiaoshou1.png" style="width: 15px;height: 15px;"></image> -->
								</view>
								<span style="margin-left: 55px;color: #999999;">{{item1.praise}}</span>
								<view style="width: 340px;height: 50px;margin-top: 10px;margin-left: 45px;">
									<span @click="open2(item.fatherId)" style="color: #333333;font-size: 14px;">{{item1.contents}}</span>
								</view>
								
							</view>
						</uni-collapse-item>
						
						
						
						
					</view>
					</view>
				</view>
			</view>
			<u-sticky offset-top="250rpx">
				<view v-if="plid==0" style="width: 100%;height: 40px;background-color: #000000;margin-top: 80px;">
					<uni-easyinput type="text" style="width: 300px;" v-model="pl" placeholder="评论" />
					<u-button @click="setpl(0)" type="primary" style="width: 50px;height: 30px;position: absolute;top:4px;left: 320px;" shape="circle" color="#fff">
						<span style="color: #2BCDDD;font-size: 12px;">发布</span>
					</u-button>
				</view>
			</u-sticky>
			
		</view>
		<uni-popup ref="popup2" :mask-click="false">
			<view style="width: 100%;height: 400px;background-color: #FFFFFF;">
				<button @click="close2">取消</button>
				<view style="width: 100%;height: 40px;background-color: #000000;">
					<uni-easyinput type="text" style="width: 300px;" v-model="pl" placeholder="评论" />
					<u-button @click="setpl(fid)" type="primary" style="width: 50px;height: 30px;position: absolute;top:4px;left: 320px;" shape="circle" color="#fff">
						<span style="color: #2BCDDD;font-size: 12px;">发布</span>
					</u-button>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	// import uniBadge from ""
	export default {
		data() {
			return {
				plid:0,
				show:false,
				guanzhuid:0,
				id:0,
				discuss:{},
				jingcai:[],
				userid:'',
				follows:[],
				pl:'',
				fid:0,
			}
		},
		onLoad() {
			this.id=this.$route.query.id
			this.inittlxq()
		},
		methods: {
			open2(fid) {
				console.log(1111111)
				this.$refs.popup2.open('bottom')
				this.plid=1
				this.fid=fid
			},
			close2() {
			
				this.plid=0
				this.$refs.popup2.close()
				this.fid=0
			
			},
			open1() {
				console.log(1111111)
				this.$refs.popup1.open('bottom')
				this.plid=1
			},
			close1() {
			
				this.plid=0
				this.$refs.popup1.close()
			
			},
			setpl(fid){
				uni.request({
				url:'http://localhost:9525/xkuser/ljp/setpl',
					method: 'GET',
				   data: {
					   fid:fid,
					   userid:this.userid,
					   contents:this.pl,
					   id:this.id,

				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.inittlxq()
						
							
					},
				})	
			},
			dianzan(commentid){
				uni.request({
				url:'http://localhost:9525/xkuser/ljp/setdianzan',
					method: 'GET',
				   data: {
					   userid:this.userid,
					   commentid:commentid,
					   
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.close2()
						this.inittlxq()
						
							
					},
				})	
			},
			qxguanzhu(){
				uni.request({
				url:'http://localhost:9525/xkuser/ljp/delguanzhu',
					method: 'GET',
				   data: {
					   id:this.userid,
					   discussid:this.discuss.discussId,
					   
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.inittlxq()
						this.guanzhuid=0
						
							
					},
				})	
			},
			guanzhu(){
				uni.request({
				url:'http://localhost:9525/xkuser/ljp/setguanzhu',
					method: 'GET',
				   data: {
					   id:this.userid,
					   discussid:this.discuss.discussId,
					   
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.inittlxq()
						this.guanzhuid=1
						
							
					},
				})	
			},
			// // 点击评论事件
			//         clickComment(e){
			//             console.log(e);
			//         },
			//         // 点击头像/用户名称事件
			//         clickUser(e){
			//             console.log(e);
			//         },
			jc(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getwonderfulcomments',
					method: 'GET',
				   data: {
					   id:this.id,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.jingcai=res.data.data.jingcai
						
							
					},
				})	
			},
			guanzhutype(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/guanzhutype',
					method: 'GET',
				   data: {
					   userid:this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.follows=res.data.data.follows
						for(var i=0;i<this.follows.length;i++){
							if(this.follows[i].discussId==this.id){
								this.guanzhuid=1
							}
						}
						
							
					},
				})	
			},
			
			inittlxq(){
				
				uni.getStorage({
					key:'userid',
					success: res=>{
						this.userid=res.data
					}
				})
				
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/inittlxq',
					method: 'GET',
				   data: {
					   id:this.id,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.discuss=res.data.data.discuss
						this.jc()
						this.guanzhutype()
							
					},
				})	
			}
		}
	}
</script>

<style>
	.jincai{
		
	}
	.pl{
		width: 100%;
		height: 150px;
		/* background-color: #3ED2E2; */
	}
	.jcpl{
		width: 100%;
		height: 200px;
		background-color: #FFFFFF;
	}
	.sj{
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
		    font-weight: 700;
		    font-size: 20px;
		    color: #FFFFFF;
		    margin-left: 15px;
			position: absolute;
			top: 20px;
	}
	.bj1{
			width:100%;
			height:468rpx;
			background-image: url(../../static/indeimg/xia.png);
			
		}
</style>
